<template>
  <div class="dashboard-container">
    <div class="radius">
      <div class="dashboard-top">
        <div class="topCard  dis-flex flex-x-between flex-y-center">
          <label class="dashboard-text">库存数据</label>
          <div class="dashboard-arrow">
            <label>更多数据</label>
            <i class="el-icon-arrow-right" />
          </div>
        </div>
      </div>
      <ul class="dashboard-stock dis-flex flex-x-around flex-y-center">
        <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
          <p class="dashboard-stock-name">未发货</p>
          <p class="dashboard-stock-num">56</p>
        </li>
        <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
          <p class="dashboard-stock-name">今日发货</p>
          <p>
            <label class="dashboard-stock-num">8</label>
            <label class="dashboard-stock-name f-20"> / 24</label>
          </p>
        </li>
        <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
          <p class="dashboard-stock-name">入库数</p>
          <p class="dashboard-stock-num">2233</p>
        </li>
        <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
          <p class="dashboard-stock-name">待审核</p>
          <p class="dashboard-stock-num ">3366</p>
        </li>
        <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
          <p class="dashboard-stock-name">待付款</p>
          <p class="dashboard-stock-num">2333</p>
        </li>
        <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
          <p class="dashboard-stock-name">售后</p>
          <p class="dashboard-stock-num">4533</p>
        </li>
        <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
          <p class="dashboard-stock-name">已收货待确认</p>
          <p class="dashboard-stock-num">5555</p>
        </li>
      </ul>
    </div>

    <div class="dis-flex  stretch ">
      <div class="radius order">
        <div class="dashboard-top">
          <div class="topCard  dis-flex flex-x-between flex-y-center">
            <label class="dashboard-text">订单统计</label>
            <div class="dashboard-arrow">
              <label>交易订单查询</label>
              <el-date-picker size="small" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="picker" />
            </div>
          </div>
        </div>
        <div>
          <ul class="order-card dis-flex flex-x-around flex-y-center">
            <li class="dis-flex flex-dir-column  flex-x-center">
              <p class="dashboard-stock-name">
                <label>成交订单</label>
                <i class="el-icon-question" />
              </p>
              <p>
                <label class="dashboard-stock-num">2345.00</label>
                <label>元</label>
              </p>
              <p class="dashboard-stock-name">250笔</p>
            </li>
            <li class="dis-flex flex-dir-column  flex-x-center">
              <p class="dashboard-stock-name">
                <label>实收金额</label>
                <i class="el-icon-question" />
              </p>
              <p>
                <label class="dashboard-stock-num">2398.00</label>
                <label>元</label>
              </p>
            </li>
            <li class="dis-flex flex-dir-column flex-x-center">
              <p class="dashboard-stock-name">
                <label>商家优惠</label>
                <i class="el-icon-question" />
              </p>
              <p>
                <label class="dashboard-stock-num">2345.00</label>
                <label>元</label>
              </p>
            </li>
            <li class="dis-flex flex-dir-column  flex-x-center">
              <p class="dashboard-stock-name">
                <label>退款订单</label>
                <i class="el-icon-question" />
              </p>
              <p>
                <label class="dashboard-stock-num">2345.00</label>
                <label>元</label>
              </p>
              <p class="dashboard-stock-name">100笔</p>
            </li>
          </ul>
          <div id="main" />
        </div>
      </div>
      <div class="entrance">
        <div class="radius">
          <div class="dashboard-top">
            <div class="topCard  dis-flex flex-x-between flex-y-center">
              <label class="dashboard-text">快捷入口</label>
            </div>
          </div>
          <ul class="dis-flex flex-wrap flex-x-between entrance-ul">
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">订单</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">商品库存</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">售后(退货退款)</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">打单拣货</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">拣货批次管理</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">发货+</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">普通商品资料</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">箱及仓位库存</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">商品吊牌打印</p>
            </li>
            <li class="dis-flex flex-dir-column flex-y-center flex-x-center">
              <i class="el-icon-document" />
              <p class="dashboard-stock-name">销售出库单</p>
            </li>
          </ul>
        </div>
        <div class="radius">
          <div class="dashboard-top">
            <div class="topCard  dis-flex flex-x-between flex-y-center">
              <label class="dashboard-text">库存预警</label>
            </div>
          </div>
          <ul class="warning">
            <li class="dis-flex flex-y-center">
              <div class="portrait">
                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/SlcYrYPa2uBt3ictCb05TPTF6F9WbJDNFwsydTNhRpzr9S3C7wgzLWujUHVW3DsTc4GmVIaQNO6x3RUzqhsBupg/132">
              </div>
              <div>
                <p class="warning-name">款号<label class="order-no">VE20121CS00034</label>库存低于1件，请及时补充库存</p>
                <p class="warning-time">2021-06-08 12:00:08</p>
              </div>
            </li>
            <li class="dis-flex flex-y-center">
              <div class="portrait">
                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/SlcYrYPa2uBt3ictCb05TPTF6F9WbJDNFwsydTNhRpzr9S3C7wgzLWujUHVW3DsTc4GmVIaQNO6x3RUzqhsBupg/132">
              </div>
              <div>
                <p class="warning-name">款号<label class="order-no">VE20121CS00034</label>库存低于1件，请及时补充库存</p>
                <p class="warning-time">2021-06-08 12:00:08</p>
              </div>
            </li>
            <li class="dis-flex flex-y-center">
              <div class="portrait">
                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/SlcYrYPa2uBt3ictCb05TPTF6F9WbJDNFwsydTNhRpzr9S3C7wgzLWujUHVW3DsTc4GmVIaQNO6x3RUzqhsBupg/132">
              </div>
              <div>
                <p class="warning-name">款号<label class="order-no">VE20121CS00034</label>库存低于1件，请及时补充库存</p>
                <p class="warning-time">2021-06-08 12:00:08</p>
              </div>
            </li>
            <li class="dis-flex flex-y-center">
              <div class="portrait">
                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/SlcYrYPa2uBt3ictCb05TPTF6F9WbJDNFwsydTNhRpzr9S3C7wgzLWujUHVW3DsTc4GmVIaQNO6x3RUzqhsBupg/132">
              </div>
              <div>
                <p class="warning-name">款号<label class="order-no">VE20121CS00034</label>库存低于1件，请及时补充库存</p>
                <p class="warning-time">2021-06-08 12:00:08</p>
              </div>
            </li>
            <li class="dis-flex flex-y-center">
              <div class="portrait">
                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/SlcYrYPa2uBt3ictCb05TPTF6F9WbJDNFwsydTNhRpzr9S3C7wgzLWujUHVW3DsTc4GmVIaQNO6x3RUzqhsBupg/132">
              </div>
              <div>
                <p class="warning-name">款号<label class="order-no">VE20121CS00034</label>库存低于1件，请及时补充库存</p>
                <p class="warning-time">2021-06-08 12:00:08</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 按需加载
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option = {}

    option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['成交订单', '退款订单', '实收金额']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '成交订单',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '退款订单',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '实收金额',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410]
        }
      ]
    }
    option && myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {

  &-container{
    margin: 10px;
  #main{
    height: 400px;
  }
  .stretch{
     align-items: stretch;
  }
    .radius{
    border-radius: 8px;
     background: white;
      margin-top: 10px;
     }
     .order{
       flex: 2;
     }
     .entrance{
       flex: 1;
       margin-left: 10px;
       &-ul{
         list-style: none;
         margin: 0;
         padding: 10px 0;
         li{
           width: 20%;
           height: 60px;
          p{
            margin: 5px 0 0 ;
          }
         }
       }
     }
       // 订单
    .order-card{
      list-style: none;
      margin: 0;
      height: 150px;
      p{
        margin:5px 0 0 ;
        i{
          margin-left: 5px;
        }
      }
    }
    // 库存预警
    .warning{
      list-style: none;
      margin: 0;
      padding: 0;
      li{
         border-bottom: 1px solid #E9E9E9;
         padding-left: 20px;
         height: 80px;
        .portrait{
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      &-name{
        font-size: 14px;
        margin: 0;
        .order-no{
          color: #008DFF;
        }
      }
      &-time{
        color: rgba(0, 0, 0, 0.25);
        font-size: 14px;
        margin: 5px 0 0 ;
      }
    }
  }

  &-top {
    border-bottom: 1px solid #E9E9E9;
    .topCard{
       height: 56px;
      padding: 0 24px;
    }
  }
  &-text{
    font-size: 16px;
    font-weight: 600;
  }
  &-arrow{
    font-size: 14px;
    color: #1890FF;
    .picker{
      margin-left: 20px;
    }
  }

  &-stock{
    margin: 0px;
    height: 150px;
    list-style: none;
    &-name{
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
    }
    &-num{
      font-size: 30px;
    }
    .f-20{
      font-size: 20px;
    }
    p{
      margin: 10px 0 0 ;
    }
  }

}
</style>
